<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <select name="con" id="con"></select>
    <select name="city" id="city"></select>
    <select name="qu" id="qu"></select>
</body>
<script>
      // 声明数组
        // 国家的信息
      var conList = ['中国', '美国', '英国', '日本', '德国'];
        // 城市的信息 二维数组
        var cityList = new Array();
        cityList[0] = ['北京', '上海', '天津', '重庆', '南京'];
        cityList[1] = ['纽约', '洛杉矶', '芝加哥', '旧金山', '华盛顿'];
        cityList[2] = ['伦敦','伯明翰','曼彻斯特','剑桥','爱丁堡'];
        cityList[3] = ['东京', '北海道', '福冈县', '广岛', '大阪'];
        cityList[4] = ['柏林', '汉堡', '慕尼黑', '科隆', '法兰克福'];


        var quList = new Array();
        quList[0] = {'北京':['北京1','北京2','北京3','北京4','北京5'],
                     "上海":['上海1','上海2','上海3','上海4','上海5'],
                     '天津':['天津1','天津2','天津3','天津4','天津5'],
                     "重庆":['重庆1','重庆2','重庆3','重庆4','重庆5'],
                     "南京":['南京1','南京2','南京3','南京4','南京5']};

        quList[1] = {"纽约":['纽约1','纽约2','纽约3','纽约4','纽约5'],
                     "洛杉矶":['洛杉矶1','洛杉矶2','洛杉矶3','洛杉矶4','洛杉矶5'],
                     "芝加哥":['芝加哥1','芝加哥2','芝加哥3','芝加哥4','芝加哥5'],
                     "旧金山":['旧金山1','旧金山2','旧金山3','旧金山4','旧金山5'],
                     "华盛顿":['华盛顿1','华盛顿2','华盛顿3','华盛顿4','华盛顿5']};
      
        quList[2] =  {'伦敦':['伦敦1','伦敦2','伦敦3','伦敦4','伦敦5'], 
                      '伯明翰':['伯明翰1','伯明翰2','伯明翰3','伯明翰4','伯明翰5'],
                      '曼彻斯特':['曼彻斯特1','曼彻斯特2','曼彻斯特3','曼彻斯特4','曼彻斯特5'], 
                      '剑桥':['剑桥1','剑桥2','剑桥3','剑桥4','剑桥5'], 
                      '爱丁堡':['爱丁堡1','爱丁堡2','爱丁堡3','爱丁堡4','爱丁堡5']};
       
       quList[3] = {'东京':['东京1','东京2','东京3','东京4','东京5'], '北海道':['北海道1','北海道2','北海道3','北海道4','北海道5'], '福冈县':['福冈县1','福冈县2','福冈县3','福冈县4','福冈县5'], '广岛':['广岛1','广岛2','广岛广岛3','广岛4','广岛5'], '大阪':['大阪1','大阪2','大阪3','大阪4','大阪5']};

       quList[4] = {'柏林':['柏林1','柏林2','柏林3','柏林4','柏林5'], 
                    '汉堡':['汉堡1','汉堡2','汉堡3','汉堡4','汉堡5'], '慕尼黑':['慕尼黑1','慕尼黑2','慕尼黑3','慕尼黑4','慕尼黑5'], '科隆':['科隆1','科隆2','科隆3','科隆4','科隆5'], '法兰克福':['法兰克福1','法兰克福2','法兰克福3','法兰克福4','法兰克福5']};
   

        var con =  document.getElementById("con");
        var city = document.getElementById("city");

        //国家下拉框填值
        for(var i =0;i<conList.length;i++)
        {
            //添加select option元素
            //con.innerHTML += "<option value="+i+">"+conList[i]+"</option>"
            con.add(new Option(conList[i],i));
        }

        //给城市下拉框填值
        con.onchange = function(){
            //city.innerHTML = "";
            city.options.length = 0;

            qu.options.length = 0;

            var index = con.value;

            for(var j=0;j<cityList[index].length;j++)
            {
                city.add(new Option(cityList[index][j],j));
            }
        }

        city.onchange = function(){
            qu.options.length = 0;

            var connum = con.value;

            var citynum = city.value;

            var quKey = cityList[connum][citynum];

            var quLi = quList[connum][quKey];

            for(var i in quLi)
            {
                qu.add(new Option(quLi[i],i));
            }
            
        }

        //手动触发
        con.onchange();
        city.onchange();
</script>
</html>